<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="300" :height="300" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="prop-panel">
                <div class="item1">
                    <div>是否编辑：</div>
                    <div>
                        <el-switch v-model="editingRef" size="small" />
                    </div>
                </div>
                <div class="item1">
                    <div>经度：</div>
                    <el-input-number v-model="x" controls-position="right" size="small" />
                </div>
                <div class="item1">
                    <div>纬度：</div>
                    <el-input-number v-model="y" controls-position="right" size="small" />
                </div>
                <div class="item1">
                    <div>高度：</div>
                    <el-input-number v-model="z" controls-position="right" size="small" />
                </div>
                <div class="item1">
                    <div>偏航角：</div>
                    <el-input-number v-model="h" controls-position="right" size="small" />
                </div>
                <div class="item1">
                    <div>俯仰角：</div>
                    <el-input-number v-model="p" controls-position="right" size="small" />
                </div>
                <div class="item1">
                    <div>翻滚角：</div>
                    <el-input-number v-model="r" controls-position="right" size="small" />
                </div>
            </div>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    toVR,
    createVueDisposer
} from "earthsdk-ui";
import { BatchSet } from "@/scripts/cimrtsManager/batchSet";
import { processNum } from "@/scripts/utils";
import { UeESFeTreeEditing } from "@/scripts/esobjs/ESFeTreeEditing/UeESFeTreeEditing";
import { UeESFeTreeAdding } from "@/scripts/esobjs/ESFeTreeAdding/UeESFeTreeAdding";

const props = withDefaults(defineProps<{ title: string, sceneObject: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};

const uiLeft = document.body.clientWidth - 10 - 300;

// const uiLeft = 10;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const cimrtsSceneTreeWrapper = objm.cimrtsSceneTreeWrapper

let editingRef: any;

const x = ref(undefined);
const y = ref(undefined);
const z = ref(undefined);
const h = ref(undefined);
const p = ref(undefined);
const r = ref(undefined);

const init = () => {
    editingRef = toVR<any>(d, [props.sceneObject, "positionEditing"])
    if(objm.activeViewer?.getEngineType() == "ESCesiumViewer"){
        editingRef.value = true;
    }else{
        const ueObj= objm.activeViewer?.getEngineObject(props.sceneObject) as UeESFeTreeEditing|UeESFeTreeAdding;
        if(ueObj){
            props.sceneObject.dispose(ueObj.eSStaticMesh.createdEvent.don(()=>{
                editingRef.value = true;
            }));   
        }
    }

    x.value = processNum(props.sceneObject.position[0], 7)
    y.value = processNum(props.sceneObject.position[1], 7)
    z.value = processNum(props.sceneObject.position[2], 7)
    h.value = processNum(props.sceneObject.rotation[0])
    p.value = processNum(props.sceneObject.rotation[1])
    r.value = processNum(props.sceneObject.rotation[2])

    props.sceneObject.dispose(props.sceneObject.positionChanged.disposableOn(() => {
        x.value = processNum(props.sceneObject.position[0], 7)
        y.value = processNum(props.sceneObject.position[1], 7)
        z.value = processNum(props.sceneObject.position[2], 7)
    }))
    props.sceneObject.dispose(props.sceneObject.rotationChanged.disposableOn(() => {
        h.value = processNum(props.sceneObject.rotation[0])
        p.value = processNum(props.sceneObject.rotation[1])
        r.value = processNum(props.sceneObject.rotation[2])

    }))
}

watch(() => props.sceneObject, () => {
    init()
}, { immediate: true })

watch([x, y, z], () => {
    props.sceneObject.position = [x.value, y.value, z.value]
})

watch([h, p, r], () => {
    props.sceneObject.rotation = [h.value, p.value, r.value]
})


onMounted(() => {

});
onBeforeUnmount(() => {
    props.sceneObject.editing = false
});
</script>

<style scoped>
.box {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.prop-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.item1 {
    display: grid;
    grid-template-columns: 75px 1fr;
    align-items: center;
    margin-bottom: 8px;
}

.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}

.texture-img {
    display: flex;
    align-items: center;
}

.prop-bottom {
    display: flex;
    justify-content: flex-end;
}

.el-input-number--small {
    width: 90px;
}

.row {
    display: flex;
    gap: 10px;
}

.el-input-number--small {
    width: 130px;
}
</style>
